<template>
<el-cascader
  v-model="myValue"
  :options="options"
  :props="props"
  v-bind="$attrs"
  v-on="$listeners">
</el-cascader>
</template>

<script>
export default {
  name: "YAddressSelector",
  model:{
    prop: 'value',
    event: 'change'
  },
  props: {
    value:{
      required: true
    },
    leafLevel: {
      type: Number,
      default: 3
    },
    showDefault:{ //是否展示“全部”字段
      type: Boolean,
      default: false
    }
  },
  computed:{
    myValue:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('change:value', val);
      }
    }
  },
  data(){
    return{
      options: [],
      props:{
        value: 'areaName',
        label: 'areaName',
        lazy: true,
        lazyLoad: (function(node, resolve){
          const {data, level} = node;
          const {id} = data || {id: ''};
          if(level > 0 && !id) resolve([]);
          else{
            this.$yAxios({
              url: this.$api.common.getChildArea,
              data:{
                pid: id
              }
            }, info => {
              if(level === this.leafLevel - 1){
                info.map(item => {
                  item.leaf = true;
                })
              }
              if(this.showDefault){
                info.unshift({
                  id: '',
                  areaName: '全部',
                  leaf: true
                })
              }
              resolve(info);
            }, e => {
              resolve([]);
            })
          }
        }).bind(this)
      }
    }
  }
}
</script>

<style scoped>

</style>